<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="coupon_box" :style="{'display':display1}" @click="jumpNext(item)">
      <view class="left">
        <view class="left_top">
          <text class="hui" :style="{backgroundColor: item.video_status==1?'green':'red'}">
            {{ getStatusNameByValue(item.video_status) }}
          </text>
          <text class="hui_name">{{ item.title }}</text>
          <text class="hui_name"></text>
          <text class="hui_name">{{ getMediaTypeByValue(item.media_type) }}</text>
        </view>
        <view class="left_bottom">
          <text>
            <slot>发布时间：</slot>
            {{ item.create_time * 1000 | time() }}
          </text>
        </view>
      </view>
      <image
          :src="item.cover===''?'https://img.fscmkjznb.com/static/noImg.jpeg'+'?'+globalImageProcessingSuffix:item.cover"
          class="ysy"></image>
      <view class="right" :style="'background:' + (item.status == 0 ? colors:'')" >
        <view class="arrow"></view>
      </view>
    </view>
    <u-loadmore :status="status" v-if="list.length>0"/>

    <view :style="{'display':display2}">
      <no-data :list="list"></no-data>
    </view>
  </view>
</template>


<script>
const API = require('../../../utils/api/douyin.js').default;
const $ = require('../../../utils/api.js');
const statusMap = {
  1: '已公开',
  2: '未公开',
  4: '审核中',
};
const mediaTypeMap = {
  2: '图集',
  4: '视频',
};
export default {
  data() {
    return {
      status: '',
      globalImageProcessingSuffix: '',
      display1: "block",
      display2: "none",
      list: [],
      openId: "",
      hasMore: false,
      cursor: 0,
      pageSize: 10
    };
  },

  components: {},
  props: {
    colors: {
      type: String
    },
  },
  onLoad(option) {
    console.log(option.openId)
    this.openId = option.openId
    this.globalImageProcessingSuffix = getApp().globalData.globalImageProcessingSuffix;
    this.getList()
  },

  created() {

  },
  methods: {
    timestampToTime(timestamp) {
      var time = new Date(timestamp);
      var Year = time.getFullYear();
      var Moth = time.getMonth() + 1;
      var Day = time.getDate();
      var Hour = time.getHours();
      var Minute = time.getMinutes();
      var Sechond = time.getSeconds();
      return Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
    },
    getStatusNameByValue(value) {
      return statusMap[value] || '未知状态'; // 如果值不存在，返回'未知状态'
    },
    getMediaTypeByValue(value) {
      return mediaTypeMap[value] || '未知状态'; // 如果值不存在，返回'未知状态'
    },
    getList() {
      const self = this;
      $.ajax({
        url: API.selectPublish,
        data: {
          "openId": self.openId,
          "pageNum": self.cursor,
          "pageSize": self.pageSize
        },
        method: 'GET',
        success(res) {
          let list = []
          list = self.list.concat(res.data.data.list);
          self.list = list;
          self.hasMore = res.data.data.has_more
          self.cursor = res.data.data.cursor
          if (self.list.length > 0) {
            self.display1 = "block"
            self.display2 = "none"
          } else {
            self.display1 = "none"
            self.display2 = "block"
          }
          if (!self.hasMore){
            self.status='nomore'
          }else{
            self.status='loadmore'
          }
          uni.stopPullDownRefresh();
        }
      });
    },
    jumpNext(item) {
      $.go('/pagesA/thirdAccount/douyin/dyDetails?videoData='+encodeURIComponent(JSON.stringify(item))+"&share_url="+item.share_url)
    },

    onReachBottom() {
      if (this.hasMore) {
        this.status = 'loading'
        this.getList();
      }
    },
    onPullDownRefresh() {
      this.list=[]
      this.cursor = 0
      this.pageSize = 10
      this.getList();
    },
  }
};
</script>

<style scoped lang="scss">
.coupon_box {

  margin: 28upx 28upx;
  box-shadow: 0upx 0upx 10upx #ddd;
  position: relative;
  border-radius: 10upx;
  overflow: hidden;

}

.coupon_box .left {
  width: 70%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20upx;
  float: left;
}

.coupon_box .left .hui {
  width: 80upx;
  height: 40upx;
  font-size: 20upx;
  color: #ffffff;

  border-radius: 8upx;
  line-height: 40upx;
  text-align: center;
  display: inline-block;
  transform: translateY(-5upx);
}

.coupon_box .left .left_top {
  width: 60vw;
  display: block;
  font-size: 26upx;
  font-weight: bold;

}

.left_top .hui_name {
  line-height: 60upx;
  height: 60upx;
  margin-left: 20upx;
  display: inline-block;
}

.left_bottom {
  font-size: 24upx;
  font-weight: bold;
  color: #333;
  height: 60upx;
  line-height: 60upx;
}

.coupon_box .right {
  text-align: center;
  height: 160upx;
  width: 33px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  background-color: #A8A8A8;
  float: right;
}

.coupon_box .right .shiyong {
  height: 40upx;
  line-height: 40upx;
  background-color: #fff;
  border-radius: 20upx;
  padding: 0 20upx;
  color: #A8A8A8;

}

.coupon_box .right .money {
  font-size: 45upx;
  color: #fff;
}

.coupon_box .right text {
  font-size: 24upx;
  color: #fff;
  height: 40upx;
  line-height: 34upx;
}

.coupon_box .bottom {
  height: 60upx;
  line-height: 60upx;
  display: flex;
  align-content: flex-start;
  font-size: 24upx;
  margin-top: 10upx;
}

.coupon_box .bottom view {
  margin-right: 20upx;
  color: #888;
  font-weight: bold;
}

.ysy {
  width: 150upx;
  height: 150upx;
  position: absolute;
  top: 7px;
  right: 47px;
}

.arrow {
  width: 10px;
  height: 10px;
  border: 2px solid #888;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
</style>
